<template>
  <div>
  <center>
  <table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>单词</th>
      <th>释义</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(word,index) in words" :key="index">
              <td>{{index+1}}</td>
              <td>{{word.word}}</td>
              <td>{{word.translate}}</td>
              <td><button type="primary" class="btn btn-danger"  @click="handle(index)">删除</button></td>
    </tr>
  </tbody>
</table>
</center>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import {getCardList,deleteWord} from '../../api/index';
export default {
  data(){
    return {
      words:[]
    }
  },
  methods:{
    handle(index){
      const data={
        index
      }
      deleteWord(data).then(res=>{
        console.log(res);
        Message.success("删除成功");
        getCardList().then((res)=>{
          this.words=res.data.words;
          console.log(this.words);
        })
      })

    }
  },
  created(){
    getCardList().then((res)=>{
      this.words=res.data.words;
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
